<template>
  <a-card
      class="general-card"
      title="人口类型概览"
      :header-style="{ paddingBottom: '8px' }"
  >
    <a-grid :cols="36" :col-gap="12" :row-gap="12">
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 }" v-for="(item, index) in businessAnalysis" :key="item.name">
        <ChainItem
            :title="item.name"
            :count="item.value"
            quota="visitors"
            chart-type="line"
            :card-style="cardStyles[index %  3]"
        />
      </a-grid-item>
    </a-grid>
  </a-card>
</template>

<script lang="ts" setup>
import ChainItem from './chain-item.vue';
import {ref} from 'vue';
import {getPType} from "@/api/grid/visualization";

const businessAnalysis = ref([])
// 色值
const cardStyles = [
  {background: 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)'},
  {background: 'linear-gradient(180deg, #F5FEF2 0%, #E6FEEE 100%)'},
  {background: 'linear-gradient(180deg, #F7F7FF 0%, #ECECFF 100%)'},
]
// 业务分析数据
const getPTypeData = async () => {
  const {data, code} = await getPType();
  if (code === 200) {
    businessAnalysis.value = data
  }
  console.log(businessAnalysis)
}

getPTypeData()
</script>
